<template>
  <div :class="[dialogShow ? 'page_body dialog_show' : 'page_body']">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div class="answer_detail_body">
      <div class="answer_detail_top">
        <img
          class="answer_index_top_img"
          src="../../assets/image/answer_top01.png"
          v-if="
            examItem.video_url == '' ||
            examItem.video_url == null ||
            examItem.video_url == undefined
          "
        />
        <video
          class="answer_index_top_img"
          v-else
          :src="examItem.video_url"
          posterNew="../../assets/image/answer_top01.png"
          controls
        ></video>
      </div>
      <div class="answer_detail_exam_box" v-if="isAnswer == 0">
        <div class="answer_detail_exam_box_top">
          <img
            class="answer_detail_exam_box_img"
            src="../../assets/image/answer_time01.png"
          />
          <div class="answer_detail_exam_top_time">
            {{ examInfo.exam_duration }}
          </div>
        </div>
        <div>
          <div class="answer_detail_exam_box_title">
            {{ examItemIndex + "." + examItem.title }}
          </div>
          <div class="answer_detail_exam_box_option_box">
            <div
              v-for="(item, index) in examItem.option"
              :key="index"
              class="answer_detail_exam_box_option_item"
            >
              <div
                :class="
                  selectedOptionKey == item.id
                    ? 'answer_detail_exam_box_option selected_item'
                    : 'answer_detail_exam_box_option'
                "
                @click="selectOptionFn(item.id)"
              >
                <div class="answer_detail_exam_box_option_content">
                  {{ optionKey[index] + "." + item.content }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          class="answer_detail_exam_box_btn"
          v-if="examItemIndex < examInfo.ques_count"
          @click="nextBtn(1)"
        >
          下一题
        </div>
        <div
          class="answer_detail_exam_box_btn"
          @click="submitAnswerBtn()"
          v-else
        >
          提交
        </div>
      </div>
      <div class="answer_detail_exam_box" v-else>
        <div>
          <div class="answer_detail_exam_box_title">
            {{ examItemIndex + "." + examItem.title }}
          </div>
          <div class="answer_detail_exam_box_option_box">
            <div
              v-for="(item, index) in examItem.option"
              :key="index"
              class="answer_detail_exam_box_option_item"
            >
              <div
                v-if="item.type == 1"
                class="answer_detail_exam_box_option is_correct_select"
              >
                <div class="answer_detail_exam_box_option_content">
                  {{ optionKey[index] + "." + item.content }}
                </div>
                <img
                  class="answer_icon"
                  src="../../assets/image/answer_icon01.png"
                />
              </div>

              <div
                v-if="item.type == 2"
                class="answer_detail_exam_box_option is_error_select"
              >
                <div class="answer_detail_exam_box_option_content">
                  {{ optionKey[index] + "." + item.content }}
                </div>
                <img
                  style="width: 0.32rem; margin-right: 0.09rem"
                  class="answer_icon"
                  src="../../assets/image/answer_icon02.png"
                />
              </div>

              <div
                v-if="item.type == 3"
                class="answer_detail_exam_box_option is_correct"
              >
                <div class="answer_detail_exam_box_option_content">
                  {{ optionKey[index] + "." + item.content }}
                </div>
              </div>

              <div
                v-if="item.type == 4"
                class="answer_detail_exam_box_option is_error"
              >
                <div class="answer_detail_exam_box_option_content">
                  {{ optionKey[index] + "." + item.content }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          class="answer_detail_exam_box_btn"
          v-if="examItemIndex < examInfo.ques_count"
          @click="nextBtn(2)"
        >
          下一题
        </div>
        <div
          class="answer_detail_exam_box_btn"
          v-if="examItemIndex == examInfo.ques_count"
          @click="backBtn()"
        >
          返回
        </div>
      </div>
    </div>
    <HomeFooter :activeKey="activeKey" :systemKey="systemKey"></HomeFooter>
  </div>
</template>
<style src="../../assets/css/answer/refereeAnswer.css" scoped></style>

<script>
import HomeFooter from "@/components/homeFooter.vue";
import HomeTop from "@/components/homeTop.vue";
import { MessageBox, Indicator, Toast } from "mint-ui";

export default {
  name: "RefereeAnswer",
  components: {
    HomeFooter,
    HomeTop,
  },
  data() {
    return {
      activeKey: 2,
      systemKey: 2,
      dialogShow: false, // 弹框显示
      baseAPIUrl: this.$store.state.baseAPIUrl,
      topTitle: "上岗认证",
      answerId: "", // 答题记录id
      isAnswer: 0, // 是否完成答题 0：否 1：是
      examInfo: {
        id: "", // 试卷id
        ques_count: 0, // 题目数量
        exam_duration: 0, // 考试时长
        question: [], // 考题列表
      },
      examItemIndex: 1, // 当前题号
      examItem: {
        id: "", // 题目id
        title: "", // 题目名称
        video_url: "", // 视频链接
        type: "", // 题目类型
        correct_id: "", // 正确答案
        analysis: "", // 答题解析
        opt_id: "", // 用户选项
        answer_correct: 1, // 是否正确 1：正确 2：错误
        option: [], // 选项
      },
      optionKey: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"],
      selectedOptionKey: "", // 答题时当前题目选项id
      selectedOptionList: [], // 答题时选择选项id列表
      examInterval: null,
    };
  },
  created: function () {
    let query = this.$route.query;
    if (query.id != undefined && query.id != "") {
      this.answerId = query.id;
      this.isAnswer = 1;
      this.getExamAnswerDetail();
    } else {
      this.isAnswer = 0;
      this.getExamFn();
    }
  },
  methods: {
    // 查询试卷详情
    getExamFn: function () {
      let that = this;
      let url = "/mobile/gainQuestionExam";
      let data = {};
      Indicator.open();
      this.axios
        .post(url, data)
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            that.examInfo.id = response.ques_exam.id;
            that.examInfo.ques_count = response.ques_exam.ques_count;
            that.examInfo.exam_duration = response.ques_exam.exam_duration;
            that.setCodeTimeFn();
            let list = [];
            for (let key in response.question) {
              list.push(response.question[key]);
            }
            that.examInfo.question = list;
            if (that.examInfo.ques_count > 0) {
              that.examItem = that.examInfo.question[0];
              that.examItemIndex = 1;
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },
    // 设置重新获取验证码时间
    setCodeTimeFn: function () {
      let that = this;
      this.examInterval = setInterval(function () {
        if (that.examInfo.exam_duration > 0) {
          that.examInfo.exam_duration--;
        } else {
          clearInterval(that.examInterval);
          MessageBox({
            message: "已超出答题时间?",
            confirmButtonText: "确认",
            showCancelButton: false,
          }).then((action) => {
            if (action == "confirm") {
              that.$router.replace({
                name: "RefereeAnswerIndex",
              });
            }
          });
        }
      }, 1000);
    },
    // 查询答题详情
    getExamAnswerDetail: function () {
      let that = this;
      let url = "/mobile/examAnswerDetail";
      let data = {
        ques_answer_id: that.answerId,
      };
      Indicator.open();
      this.axios
        .post(url, data)
        .then((response) => {
          Indicator.close();
          if (response.code == 0) {
            let list = [];
            for (let key in response.list) {
              list.push(response.list[key]);
            }
            that.examInfo.question = list;
            that.examInfo.ques_count = list.length;
            if (list.length > 0) {
              that.examItem = that.examInfo.question[0];
              that.examItem.option.forEach((item) => {
                item.type = that.setOptionType(item);
              });
              that.examItemIndex = 1;
            }
          } else {
            Toast({
              message: response.msg,
              duration: 3000,
            });
          }
        })
        .catch(function (error) {
          Indicator.close();
          console.log(error);
        });
    },

    // 设置选项属性
    setOptionType: function (itemObj) {
      let obj = itemObj;
      let opt_id = "" + this.examItem.opt_id;
      let userSelect = opt_id.split(",");
      let isSelect = userSelect.findIndex((item) => {
        return obj.id == item;
      });
      if (isSelect != -1 && obj.is_correct == 1) {
        return 1; // 用户选中并正确
      } else if (isSelect != -1 && obj.is_correct == 2) {
        return 2; // 用户选中并错误
      } else if (isSelect == -1 && obj.is_correct == 1) {
        return 3; // 用户未选择但正确
      } else if (isSelect == -1 && obj.is_correct == 2) {
        return 4; // 用户未选择但错误
      }
    },
    // 下一题
    nextBtn: function (key) {
      let that = this;
      if (this.examItemIndex < this.examInfo.ques_count) {
        if (key == 2) {
          that.examItemIndex++;
          that.examItem = that.examInfo.question[that.examItemIndex - 1];
          that.examItem.option.forEach((item) => {
            item.type = that.setOptionType(item);
          });
        } else {
          if (that.selectedOptionKey == "" || that.selectedOptionKey == null) {
            Toast({
              message: "请先作答",
              duration: 3000,
            });
          } else {
            let obj = {
              ques_id: this.examItem.id,
              opt_id: this.selectedOptionKey,
            };
            that.selectedOptionList.push(obj);
            that.selectedOptionKey = "";
            that.examItemIndex++;
            that.examItem = that.examInfo.question[that.examItemIndex - 1];
          }
        }
      }
    },
    // 选择选项
    selectOptionFn: function (id) {
      this.selectedOptionKey = id;
    },
    // 提交作答
    submitAnswerBtn: function () {
      let that = this;

      if (this.selectedOptionKey == "" || this.selectedOptionKey == null) {
        Toast({
          message: "请先作答",
          duration: 3000,
        });
      } else {
        let obj = {
          ques_id: this.examItem.id,
          opt_id: this.selectedOptionKey,
        };
        this.selectedOptionList.push(obj);

        let url = "/mobile/saveExamAnswer";
        let data = {
          ques_exam_id: this.examInfo.id,
          answer: this.selectedOptionList,
        };
        MessageBox({
          message: "确认提交答题?",
          confirmButtonText: "确认",
          showCancelButton: true,
        }).then((action) => {
          if (action == "confirm") {
            that.axios
              .post(url, data)
              .then((response) => {
                if (response.code == 0) {
                  Toast({
                    message: "提交成功",
                    duration: 3000,
                  });
                  that.$router.replace({
                    name: "RefereeAnswerIndex",
                  });
                } else {
                  Toast({
                    message: response.msg,
                    duration: 3000,
                  });
                }
              })
              .catch(function (error) {
                console.log(error);
              });
          }
        });
      }
    },
    // 返回
    backBtn: function () {
      this.$router.replace({
        name: "RefereeAnswerIndex",
      });
    },
    // 前往答题
    toAnswerDetail: function () {
      this.$router.push({
        name: "CoachEnrollList",
      });
    },
    // 查看答卷
    toAnswerView: function () {
      this.$router.push({
        name: "CoachEnrollList",
        query: {
          id: this.answerId,
        },
      });
    },
  },
};
</script>
